<template>
    <div id="app">
         <router-view/>
    </div>
</template>
<script>

    import BackTop from "@/components/BackTop/BackTop";
    import {debounce} from '@/utils/utilFn'
    export default {
        name: "app",
        components: {
            BackTop
        },
        data() {
            return {
                isShowBackTop: false,
            }
        },
        methods: {
            backTopHandle() {
                window.scrollTo(0, 0)
            },
            // 当页面竖向滚动条 滚动 offset px时，显示返回顶部按钮
            showBackTopBtn() {
                let offset = 100;
                // 展示返回顶部按钮
                let scrollTop = document.documentElement.scrollTop; //当前的的位置
                scrollTop > offset ? this.isShowBackTop = true : this.isShowBackTop = false
            },
        },
        mounted() {
            window.addEventListener("scroll", debounce(() => {

            this.showBackTopBtn()

            }, 300));
        }         
    }
</script>
<style lang="less">
    #app {
        font-size: 17px;
        color: #6f6f6f;
    }

</style>
